<template>
    <div
        :class="['w-full text-20 p-24 box-border', { 'min-screen-height': isLoading }]"
        v-loading="isLoading"
        element-loading-text="加载中....."
    >
        <!-- 顶部 -->
        <PageHeader
            v-model="headerPopoverVisible"
            :is-need-screen='true'
            title="活动列表"
            :is-data-loading="isLoading"
            @refresh="resetList"
            @search="search"
        >
            <SearchBox type='left' title="活动名称">
                <el-input v-model="searchParams.goodsName" placeholder="请输入活动名称" />
            </SearchBox>
            <SearchBox type='right' title="活动状态">
                <el-select
                    v-model="searchParams.goodsClass"
                    class="w-full"
                    placeholder="请选择活动状态"
                    :teleported="false"
                >
                    <el-option
                        v-for="item in goodsClassList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        @click.native.stop
                    />
                </el-select>
            </SearchBox>
            <SearchBox type="full" title="选择时间">
                <el-date-picker
                    class="w-full"
                    v-model="searchParams.timeRangeValue"
                    clearable
                    type="daterange"
                    range-separator="至"
                    start-placeholder="起始时间"
                    end-placeholder="结束时间"
                />
            </SearchBox>
            <template #custom>
                <el-button round type="primary" @click="toAddActivity">新增活动</el-button>
            </template>
        </PageHeader>
        <!-- 商品列表 -->
        <template v-if="goodList.length">
            <div class="w-full flex-between-items-box flex-wrap">
                <div
                    class="goods-container card-style mb-20 flex-between-items-box common-shadow"
                    v-for="(item, index) in goodList"
                    :key="index"
                >
                    <GoodDetail @updateGoodList="updateGoodList" :good-detail="item"/>
                </div>
                <!-- 分页 -->
                <div class="flex-center-box w-full mt-20">
                    <el-pagination
                        v-model:current-page="pageParams.currentPage"
                        background
                        layout="total, prev, pager, next, jumper"
                        :total="pageParams.total"
                        @current-change="handleCurrentChange"
                    />
                </div>
            </div>
        </template>
        <!-- 内容 -->
        <Empty v-else/>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { PageParams } from '@/type/common'
// import { MemberDetailData, httpMemberList } from '@/api/module/goodsCenter'
// import { timeout } from '@utils/methods'
import PageHeader from '@/components/PageHeader/index.vue'
import SearchBox from '@/components/SearchBox/index.vue'
import Empty from '@/components/Empty/index.vue'
import listData from './data.json'
import GoodDetail from './components/GoodDetail/index.vue'

const router = useRouter()

// 数据是否加载中
const isLoading = ref(true)
const headerPopoverVisible = ref(false)

// 商品分类列表
const goodsClassList = [
    { value: 1, label: '未开始' },
    { value: 2, label: '进行中' },
    { value: 3, label: '已结束' }
]

// 查询内容
const searchParams = reactive<any>({
    goodsName: '',
    goodsCode: '',
    goodsClass: null,
    timeRangeValue: []
})

// 分页
const pageParams = reactive<PageParams>({
    currentPage: 1,
    currentSize: 10,
    total: 10
})

// 商品列表
const goodList = ref<any[]>([])

/**
 * 获取会员列表
 * */
const getMemberList = () => {
    isLoading.value = false
    goodList.value = listData.record
    // pageParams.total = 10
    // httpMemberList({
    //     ...searchParams,
    //     ...pageParams
    // }).then(res => {
    //     goodList.value = res.data.list
    //     pageParams.total = res.data.total
    // }).finally(async () => {
    //     await timeout(500)
    //     isLoading.value = false
    // })
}

getMemberList()

// 删除后刷新数据
const updateGoodList = () => {
    pageParams.currentPage = 1
    pageParams.currentSize = 10
    getMemberList()
}

/**
 * 重置数据
 * */
const resetList = () => {
    searchParams.goodsName = ''
    searchParams.goodsCode = ''
    searchParams.goodsClass = null
    updateGoodList()
}

/**
 * 查询数据
 * */
const search = () => {
    console.log('查询数据')
    getMemberList()
}

// 当前页码改变
const handleCurrentChange = () => {
    console.log('页码改变')
    console.log(pageParams)
}

// 新增活动
const toAddActivity = () => {
    router.push('/MarketingActivities/AddActivity?pageType=add')
}
</script>

<style lang="less" scoped>
:deep(.el-range-editor.el-input__wrapper){
    width: 100% !important;
}

.goods-container{
    width: calc(50% - 10px);
    height: 180px;
    overflow: hidden;
    transition: all .3s;

    div:nth-child(2n) {
        @apply ml-20;
    }
}

.goods-container:hover{
    transform: scale(1.02);
}

:deep(.el-pager .number){
    border-radius: 8px !important;
}
</style>
